<template>
  <a-card :bodyStyle="{padding : '10px 10px'}" :bordered="false" class="contentFullHeight">

    <a-layout class="transparent" style="margin-bottom: 24px">
      <a-layout-sider class="border"
                      style="
      border: 0;
      flex: 0 0 200px;
      max-width: 200px;
      min-width: 200px;
      width: 200px;">
        <a-card :headStyle="{textAlign:'center',background:'#F3F3F3'}" size="small" style="height: 100%;" title="部门组织">
          <!--<s-tree-->
          <!--:dataSource="orgTree"-->
          <!--:openKeys.sync="openKeys"-->
          <!--:search="true"-->
          <!--:showLine="true"-->
          <!--@click="handleClick"-->
          <!--@add="handleAdd"-->
          <!--@titleClick="handleTitleClick"></s-tree>-->

          <a-tree
            :defaultExpandAll="true"
            :selectedKeys.sync="selectedKeys"
            :showLine="true"
            :treeData="orgTree"
            @select="treeSelect"
          />


        </a-card>

      </a-layout-sider>
      <a-layout style="margin-left: 15px;">
        <a-layout-content>

          <!-- <div class="tableBox">
             <div style="width: 50%;float: left;text-align: left">
               <span style="height: 40px; line-height: 40px; padding-left: 10px; color: red;">
               抄表班共有抄表员3人。
               </span>
             </div>
             <div style="width: 50%;float: right">
               <div class="tableBox-item">
               <span class="tableBox-button">保存抄录</span>
               </div>
               <div class="tableBox-item">
               <span class="tableBox-button">打印抄表表格</span>
               </div>
               <div class="tableBox-item">
               <span class="tableBox-button">下一手册</span>
               </div>
             </div>
           </div>-->

          <a-card :bodyStyle="{padding : '5px 24px'}" :bordered="true" class="searchBox" style="margin-bottom: 10px">
            <a-form layout="inline">

              <a-form-item label="用户名称">
                <a-input v-model="searchParams.name"></a-input>
              </a-form-item>

              <a-form-item>
                <a-button @click="handleSearch" icon="search" type="primary">查询</a-button>
              </a-form-item>

            </a-form>
          </a-card>

          <a-table
            :columns="columns"
            :dataSource="loadData"
            :loading="tableLoading"
            :pagination="false"
            :scroll="{ y: 600 }"
            bordered
            ref="table"
            rowKey="id"
            size="small"
          >
            <span slot="status" slot-scope="text, record">
        <template>
          {{text|status}}
        </template>
      </span>

            <span slot="action" slot-scope="text, record">
        <template>
           <a @click="handleSetDept(record)" href="javascript:;">人员调动</a>
          <!--<a-divider type="vertical"/>-->
          <!--<a href="javascript:;">登录管理</a>-->
          <!--<a-divider type="vertical"/>-->
          <!--<a href="javascript:;">修改</a>-->
          <!--<a-divider type="vertical"/>-->
          <!--<a href="javascript:;">删除</a>-->
        </template>
      </span>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>


    <org-modal @close="handleSaveClose" @ok="handleSaveOk" ref="modal"/>

    <a-modal  :maskClosable="false"
      :title="mdl.title"
      :width="500"
      @ok="setDept"
      v-model="mdl.visible"
    >
      <a-form>
        <a-form-item
          label="调入部门"
        >
          <DeptTree v-model="mdl.formData.deptId"></DeptTree>
        </a-form-item>

      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
  import STree from '@/components/Tree/Tree'
  import DeptTree from '@/hzjComponents/treeSelect/DeptTree'
  import OrgModal from './modules/OrgModal'
//  import { getOrgTree, getServiceList } from '@/api/manage'
  import { getQuerySysDeptList } from '@/api/setting'
  import { queryUserBySysDeptId } from '@/api/sysUser'

  import Mock from 'mockjs2'

  //  const tableData = Mock.mock({
  //    'tableData|15': [
  //      {
  //        'id': '@id',
  //        'key|+1': 1,
  //        'name': '@cname',
  //        'dept|1': ['抄表班'],
  //        'job': '抄表员',
  //        'tel': '123456789',
  //        'loginName': '@cname',
  //        'tm': '@lastDateTime'
  //      }
  //    ]
  //  }).tableData.map((item) => {
  //    item.loginName = item.name
  //    return item
  //  })


  //处理成树状数据
  function treeDeal(data) {
    let treeData = data.map(function(item) {
      let newItem = {
        title: item.name,
        key: item.id,
        icon: item.icon || null,
        children: treeDeal(item.children)
      }
      return newItem
    })

    return treeData
  }

  export default {
    name: 'transcription',
    components: {
      STree,
      OrgModal,
      DeptTree
    },
    data() {
      return {
        tableLoading: false,
        searchParams: {
          name: ''

        },
        info: {},
        selectedKeys: [],
        orgTree: [],
        // 查询参数
        queryParam: {},
        // 表头
        deptId: 0,
        columns: [
          {
            title: '人员名称',
            dataIndex: 'userName',
            width: '10%'
          },
          {
            title: '部门',
            dataIndex: 'deptName',
            width: '10%'
          },
          {
            title: '联系电话',
            dataIndex: 'phone',
            width: '15%'
          },
          {
            title: '账户名',
            dataIndex: 'account',
            width: '10%'
          }, {
            title: '状态',
            dataIndex: 'status',
            width: '10%',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '300px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: [],

        /*   -------新增修改弹窗--------*/
        mdl: {
          visible: false,
          title: '人员调动',
          formData: {
            deptId: null//部门
          }
        }
      }
    },
    inject: ['upShow'], filters: {
      status(val) {
        let statusList = { 0: '正常', 1: '锁定', 2: '销号' }
        return statusList[val]
      }
    },
    created() {
      // getOrgTree().then(res => {
      //   console.log(res.result);
      //   this.orgTree = res.result
      // })
    },

    mounted() {
      this.getQuerySysDeptList()
      this.queryUserBySysDeptId()
    },

    methods: {
      getQuerySysDeptList() {

        getQuerySysDeptList().then(res => {

          if (res.code === 200) {
            this.orgTree = treeDeal(res.data)
            this.selectedKeys = [treeDeal(res.data)[0].key]
            this.handleSearch()
          } else {
            this.upShow(2, res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      queryUserBySysDeptId() {
        let param = {
          id: this.deptId,
          _search: true
        }
        queryUserBySysDeptId(param).then(res => {
          if (res.code === 200) {
            this.loadData = res.data.records
          }
        })
      },
      handleSearch() {
        // this.tableLoading = true
//        const parameter = {
//          _search:false,//是否分页查询
//          data: Object.assign({ deptId :  this.selectedKeys[0]}  , this.searchParams)
//        }
        this.queryUserBySysDeptId()
//         getDeptMember(parameter).then(res => {
//           this.tableLoading = false
//           this.data =  res.data
//         }).catch(err => {
//           this.tableLoading = false
//           this.upShow(2)
//         })

      },

      handleSaveOk() {

      },
      handleSaveClose() {

      },


      treeSelect(selectedKeys, e) {
        console.log(selectedKeys, e)
        this.deptId = selectedKeys
        this.handleSearch()
      },

      handleSetDept(row) {
        console.log('这一行', row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.visible = true
      },
      setDept() {
        const params = {
          id: this.mdl.formData.id,
          deptId: this.mdl.formData.deptId
        }

        this.$axios
          .put(`${this.$URLMAP.url.user.update}/${params.id}`, params)
          .then((response) => {
            if (response.code === 200) {
              this.upShow(1, '人员调动成功')
              this.mdl.visible = false
              this.handleSearch()
            } else {
              this.upShow(2, res.msg || '人员调动失败')
            }
          }).catch(err => {
          this.upShow(2, '人员调动接口调用失败')
        })
      }
    }
  }
</script>


<style lang="less" scoped>

  .operationBtn {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    text-align: center;
    // background: #39a1ea;
    color: #fff;
    border-radius: 0;
  }

  .border {
    border: 1px solid #e8e8e8;
  }

  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .transparent {

    background-color: #fff;


    .ant-layout, .ant-layout-sider, .ant-layout-header {
      background: #ffffff;
    }


    .ant-layout-sider {
      flex: 0 0 450px;
      max-width: 450px;
      min-width: 450px;
      width: 450px;
    }

    .ant-layout-header {
      height: auto;
      padding: 0;
      /*line-height: 64px;*/
      /*background: #001529;*/
    }
  }

  #asideProfile {
    dl, dt, dd {
      padding: 0;
      margin: 0;
    }

    dd {
      font-weight: 700
    }

    .item-tiling > * {
      width: 100%;
    }

    .d-flex {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }

    .profile-intro {
      border-bottom: 1px solid #e3e3e3;
    }

    .data-info {
      padding: 12px 10px;
      border-bottom: 1px solid #e3e3e3;
      text-align: center;
    }

    .grade-box {
      margin-top: -8px;
      padding: 16px;
      text-align: center;

      dl dt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      dd {
        margin-left: 6px;
      }

      dl {
        margin-top: 8px;
        float: left;
      }

      dl:nth-child(even) {
        width: 45%;
      }

      dl:nth-child(odd) {
        width: 55%;
      }
    }


  }

  #asideProfile .grade-box dl dd {
    font-weight: 600;
    margin-left: 6px;
  }

  #asideProfile .grade-box dl {
    margin-top: 8px;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }


  .tableBox {
    width: 100%;
    margin: auto;
    border: solid 1px #e5e5e5;
    height: 40px;
    background: #fff;
    margin-bottom: 6px;

    .tableBox-item {
      float: right;
      line-height: 40px;
      border-left: solid 1px #e5e5e5;
      padding-left: 12px;
      padding-right: 12px;
      cursor: pointer;
    }

    .tableBox-button {
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      color: #39a1ea;
    }
  }

</style>
<style lang="less">

  .fixed-width-label .ant-form-item-label {
    width: 100px !important;
  }

  .text-red {
    label {
      color: red;
    }

    input {
      border-color: red;
    }

  }

  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;

      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
